<template>
	<div class="container" v-loading="loading">
		<el-form ref="form" :model="formData" :rules="rules" label-width="140px">
			<el-row :gutter="20" type="flex" justify="center">
				<el-col :span="8">
					<!-- 姓名 -->
					<el-form-item label="姓名" prop="name">
						<el-input v-model="formData.name" :disabled="!isEdit"></el-input>
					</el-form-item>

					<!-- 身份证号 -->
					<el-form-item label="身份证号" prop="idcard">
						<el-input v-model="formData.idcard" :disabled="!isEdit"></el-input>
					</el-form-item>

					<!-- 民族 -->
					<el-form-item label="民族" prop="nation">
						<!-- <el-input v-model="formData.nation" :disabled="!isEdit"></el-input> -->
						<el-select v-model="formData.nation" placeholder="请选择" :disabled="!isEdit">
							<el-option v-for="item in nationOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					
					<!-- 性别 -->
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="formData.sex">
							<el-radio :label="1" :disabled="!isEdit">男</el-radio>
							<el-radio :label="2" :disabled="!isEdit">女</el-radio>
						</el-radio-group>
					</el-form-item>
					
					<!-- 电话 -->
					<el-form-item label="电话" prop="phone">
						<el-input v-model="formData.phone" :disabled="!isEdit"></el-input>
					</el-form-item>
					
					<!-- 出生日期 -->
					<el-form-item label="出生日期" prop="birth">
						<el-date-picker v-model="formData.birth" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :disabled="!isEdit">
						</el-date-picker>
					</el-form-item>
					
					<!-- 文化程度 -->
					<el-form-item label="文化程度" prop="education">
						<!-- <el-input v-model="formData.education" :disabled="!isEdit"></el-input> -->
						<el-select v-model="formData.education" placeholder="请选择" :disabled="!isEdit">
							<el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					
					<!-- 联系地址 -->
					<el-form-item label="联系地址" prop="addr">
						<el-input v-model="formData.addr" :disabled="!isEdit"></el-input>
					</el-form-item>
					
					<!-- 准考证头像 -->
					<el-form-item label="准考证头像" prop="icon">
						<upload :idPic.sync="formData.icon" :disabled="!isEdit"></upload>
					</el-form-item>
					
					
				</el-col>

				<el-col :span="8">
					
					<!-- 毕业时间 -->
					<el-form-item label="毕业时间" prop="gdtm">
						<el-date-picker v-model="formData.gdtm" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :disabled="!isEdit">
						</el-date-picker>
					</el-form-item>
					
					
					<!-- 毕业院校 -->
					<el-form-item label="毕业院校" prop="gdsl">
						<el-input v-model="formData.gdsl" :disabled="!isEdit"></el-input>
					</el-form-item>


					<!-- 学位 -->
					<el-form-item label="学位" prop="degree">
						<!-- <el-input v-model="formData.degree" :disabled="!isEdit"></el-input> -->
						<el-select v-model="formData.degree" placeholder="请选择" :disabled="!isEdit">
							<el-option v-for="item in degreeOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					
					<!-- 政治面貌 -->
					<el-form-item label="政治面貌" prop="political">
						<!-- <el-input v-model="formData.political" :disabled="!isEdit"></el-input> -->
						<el-select v-model="formData.political" placeholder="请选择" :disabled="!isEdit">
							<el-option v-for="item in politicalOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					
					<!-- 身份证正面 -->
					<el-form-item label="身份证正面照片" prop="idpic">
						<upload :idPic.sync="formData.idpic" :disabled="!isEdit"></upload>
					</el-form-item>

				</el-col>

				<el-col :span="8">
					<!-- 籍贯 -->
					<el-form-item label="籍贯" prop="nate">
						<el-input v-model="formData.nate" :disabled="!isEdit"></el-input>
					</el-form-item>
					
					<!-- 国籍 -->
					<el-form-item label="国籍" prop="nationality">
						<el-input v-model="formData.nationality" :disabled="!isEdit"></el-input>
					</el-form-item>
					
					<!-- 户籍 -->
					<el-form-item label="户籍" prop="census">
						<el-input v-model="formData.census" :disabled="!isEdit"></el-input>
					</el-form-item>
					

					<!-- 身份证背面 -->
					<el-form-item label="身份证背面照片" prop="idrpic">
						<upload :idPic.sync="formData.idrpic" :disabled="!isEdit"></upload>
					</el-form-item>
				</el-col>

			</el-row>

			<!-- 注册按钮 -->
			<el-form-item class="btns">
				<template v-if="!isEdit">
					<el-button type="danger" @click="edit">修改信息</el-button>
				</template>
				<template v-else>
					<el-button type="primary" :loading="saveBtnLoading" @click="save">保存</el-button>
					<el-button type="info" @click="cancel">取消</el-button>
				</template>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		getExaminee,
		update
	} from "@/api/apiList/user.js";
	import {
		createNamespacedHelpers
	} from 'vuex'
	import {formData,rules,politicalOptions,nationOptions,degreeOptions,educationOptions} from "@/utils/common.js"
	const {
		mapMutations
	} = createNamespacedHelpers('userInfoModule')
	export default {
		name: "user",
		data() {
			return {
				loading: false, //整页loading
				isEdit: false, //是否为编辑状态
				saveBtnLoading: false, //保存按钮loading
				formData: formData,//表单数据
				rules:rules,//校验规则
				politicalOptions:politicalOptions,//政治面貌
				nationOptions:nationOptions,//民族
				degreeOptions:degreeOptions,//学位
				educationOptions:educationOptions//文化程度
			};
		},
		methods: {
			...mapMutations(["UPDATE_USER_INFO"]),
			async API_getExaminee() {
				//获取个人信息接口
				return await getExaminee();
			},
			async API_update(data) {
				//更改个人信息接口
				let result = {
					data, //个人信息
				};
				return await update(result);
			},
			edit() {
				//修改
				this.isEdit = true;
			},
			async save() {
				//保存
				this.$refs.form.validate(async (bool) => { //验证
					if (bool) {
						this.saveBtnLoading = true;
						console.log(this.formData)
						let res = await this.API_update(this.formData);
						// console.log(res)
						if (res.data.code === 1000) {
							this.isEdit = false; //更改为不编辑状态
							let userRes = await this.API_getExaminee(); //刷新页面
							console.log(userRes)
							this.UPDATE_USER_INFO(userRes.data.data) //更新数据
							this.$message({
								message: res.data.msg,
								type: "success",
							});
							// this.$router.push("/home")
						} else {
							this.$message.error(res.data.msg);
						}
						this.saveBtnLoading = false;
					}
				})
			},
			cancel() {
				//取消
				this.isEdit = false;
			},
		},
		async created() {
			this.loading = true;
			let res = await this.API_getExaminee();
			console.log(res);
			this.formData = res.data.data;
			this.loading = false;
		},
	};
</script>

<style lang="scss" scoped>
	.btns {
		text-align: center;
		margin-left: 0;

		/deep/.el-form-item__content {
			margin-left: 0 !important;
		}
	}
</style>
